<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<base href="<%=basePath%>">
		<!--[if lte IE 6]></base><![endif]-->
		<title>广东科学技术职业学院考生报到系统>>>>财务处</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

		<link href="css/newindex.css" rel="stylesheet" type="text/css" />
		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
		<script src="js/jquery-1.5.js" language="javascript">
</script>
		<script src="js/finance.js" language="javascript">
</script>
		<script src="js/newpublic.js" language="javascript">
</script>

		<script language="javascript" type="text/javascript"
			src="js/jquery.flot.js">

</script>
		<script src="js/jquery-ui-1.8.5.custom.min.js" language="javascript">
</script>
		<!--                     下面是柱状图所要用到的两个文件         -->

		<script language="javascript" type="text/javascript"
			src="js/Bar-chart.js">
</script>

		<!-- 下面是饼图所要用到的两个文件 -->
		<script type="text/javascript" src="js/jquery.flot.pie.min.js">
</script>
		<script type="text/javascript" src="js/Pie-chart.js">
</script>

		<script language="javascript">

var paymentBarchart = new BarChart(); //缴费情况柱状图
var collegeId;
var t;
$(function() {
	$("#content").draggable({cancel:".contable"});
	initData();

	$("#collegeList").change(function() {
		collegeId = $('#collegeList').val();
		postAndDealPaymentData();
	})
})

//初始化选择数据
function initData() {
	$.post("json/professionRegisterPaymentAction!initCollegeName", function(
			data) {
		collegesName_Json = eval("(" + data.collegesName_Json + ")");
		$('#collegeList').empty();
		for ( var a in collegesName_Json) {
			$("#collegeList").append(
					"<option value='" + collegesName_Json[a] + "'>" + a
							+ "</option>");
		}
		collegeId = $('#collegeList').val();

		//开始调用数据更新
			update();
		})
}

function update() {
	postAndDealPaymentData();
	t=setTimeout("update()", 30000);
}

//发出请求并处理缴费情况数据
function postAndDealPaymentData() {
	$.post("json/professionRegisterPaymentAction!allProfessionPaymentInfo", {
		'collegeId' : collegeId
	}, function(data) {
		professionPaymentInfo_Json = eval("(" + data.professionPaymentInfo_Json
				+ ")");
		professionPaymentInfo_Bar = eval("(" + data.professionPaymentInfo_Bar
				+ ")");
		fillPaymentInfo(professionPaymentInfo_Json);
		paymentBarchart.buildBarsChart($("#placeholderForBars"),
				$("#lengendForBars"), professionPaymentInfo_Bar);
	})
}

//填充缴费情况数据
function fillPaymentInfo(data) {
	//徐了第一列外其余td删除
	$("tr#professionName td:gt(0)").remove();
	$("tr#totalAmount td:gt(0)").remove();
	$("tr#realAmount td:gt(0)").remove();
	$("tr#paidAmount td:gt(0)").remove();
	$("tr#unPaidAmount td:gt(0)").remove();

	for ( var a in data) {
		var td = $("<td align='center' width='"+ 85/data.length +"%'>" + data[a].professionName + "</td>")
		$("#professionName").append(td);

		var td = $("<td align='center' style='display:none;'>" + format(data[a].totalAmount) + "</td>")
		$("#totalAmount").append(td);

		var td = $("<td align='center'>" + format(data[a].realAmount) + "</td>")
		$("#realAmount").append(td);

		var td = $("<td align='center'>" + format(data[a].paidAmount) + "</td>")
		$("#paidAmount").append(td);

		var td = $("<td align='center'>" + format(data[a].unPaidAmount) + "</td>")
		$("#unPaidAmount").append(td);
	}
	$("tr#realAmount td:not(':first')").css("color","#0C0");
	$("tr#paidAmount td:not(':first')").css("color","#F00");
}

//把元化为万
function format(data) {
	data = data * 1.0 / 10000;
    return data.toFixed(2)
}

</script>


	</head>

	<body onload="fixPNGAll()">
		<div id="bg">
			<div id="bodydiv">
				<div id="bodytitle">
					财务处
					<div>
						<a href="logoutAction" style="color: #F00;">退出</a>
					</div>
				</div>

				<div id="menudiv">
					<div class="menu">
						<div style="position: relative;">
							<a href="financeAction"><img src="newimages/l3.png"
									width="48" height="48" border="0" />
								<div>
									学校缴费率
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="financeCollegeAction"><img src="newimages/l1.png"
									width="46" height="47" border="0" />
								<div>
									学院缴费率
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="financeProfessionAction"><img src="newimages/l2.png"
									width="48" height="48" border="0" />
								<div>
									专业缴费率
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="financeStudentAction"><img
									src="newimages/class.png" width="48" height="48" border="0"
									style="margin-top: 5px;" />
								<div style="margin-top: -10px;">
									学生缴费信息
								</div> </a>
						</div>
					</div>
				</div>
				<div id="content">
					<!--当前位置CSS-->
					<div class="top">
						<div class="topleft">
							<div class="dan">
								<div>
									当前位置>财务处>各学院概况
								</div>
							</div>
							<div class="F5">
								<img src="newimages/F5.png" />
							</div>
						</div>
						<div class="topright">
							<div class="toprightmin"></div>
							<div class="toprightmax"></div>
							<div class="toprightclose" onclick="if(confirm('是否确定退出！')){location.replace('loginoutAction')}" title="点击退出"></div>
						</div>
					</div>
					<!---->
					<!--内容-->
					<div class="condiv">
						<div class="submenu">

						</div>
						<div class="contable">
							<!--******************************-->
							<div class="title">
								各专业缴费概况    <font size="2">单位:万元</font>
							</div>
							<table width="80%" border="0" align="center" cellpadding="0"
								cellspacing="8">

								<tr>
									<td height="40" colspan="3" align="left">
										学院：
										<select id="collegeList">
											<option value="1">
												计算机学院
											</option>
											<option value="2">
												经管学院
											</option>
											<option value="4">
												人文学院
											</option>
											<option value="3">
												外国语学院
											</option>
											<option value="5">
												建工学院
											</option>
											<option value="6">
												机电学院
											</option>
											<option value="7">
												体教部
											</option>
											<option value="8">
												广州学院
											</option>
										</select>
									</td>
								</tr>
							</table>
							<table width="80%" border="0" align="center" cellpadding="0"
								cellspacing="8" id="">
								<tr id="professionName" align="left">
									<td width="15%">
										&nbsp;
									</td>
								</tr>

								<tr id="totalAmount" align="left" style="display:none;">
									<td align="right">
										总缴费金额：
									</td>
								</tr>

								<tr id="realAmount">
									<td align="right">
										应收缴费总额：
									</td>
								</tr>

								<tr id="paidAmount">
									<td align="right">
										已缴费金额：
									</td>
								</tr>

								<tr id="unPaidAmount">
									<td align="right">
										欠费金额：
									</td>
								</tr>
								<tr>
									<td colspan="8" height="44" align="center"
										style="font-size: 18px; text-align: center;">
										各专业缴费率对比图
									</td>
								</tr>
								<tr>
									<td colspan="8" align="center">
										<div align="center" >已缴费率 ≈ ( <font style="color: #F00;">已缴费金额</font> / <font style="color: #0C0;">应收缴费总额</font> ) * 100%<br /></div>
										<div id="placeholderForBars"
											style="width: 550px; height: 300px; float: left;"></div>
										<div id="lengendForBars" style="float: right; width: 150px"></div>
									</td>
								</tr>
							</table>
							<!-------**********************************-------->
							<!----------------------------------------------->
						</div>
					</div>
					<!---->
					<!---->
					<div class="condiv"
						style="width: 997px; position: relative; height: 20px; min-height: 20px; text-align: center;">
						<a href="computer/computer.html" target="_blank">计算机学院程序员之家</a>
					</div>
					<!---->

					<!--低部-->
					<div class="bottom">
						&nbsp;
					</div>
					<!---->
				</div>
			</div>
		</div>
	</body>
</html>
